<template>
	<div >
		<div v-for="(item,index) in getDatas" :key="index">
			<div v-if="item.type == 3" class="pd10 pt25 flex alcenter">
				<div class="title-bd"></div>
				<div class="ml10 ft16 ftw600 text-default">{{item.content}}</div>
			</div>
			<div v-if="item.type == 1" :style="item.style" style="line-height: 32px" class=" ft16 text-main ftw400">
				{{item.content}}
			</div>
			<div  v-if="item.type == 2" style="font-size: 0; margin: 0;" :style="item.style" >
				<el-image style="width: 100%;height: 100%" :src="item.content" fit="fill">
				</el-image>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:"htmlShow",
		computed:{
			getDatas(){
				let arr = new Array;
				for(var a  in this.datas){
					let data = this.datas[a];
					if(a > 0 && data.type != 3){
						
						let up = this.datas[a - 1];
						if(up.type == 1){
								arr.push({
									type:this.datas[a].type,
									content:this.datas[a].content,
									style:'padding-top:15px;'
								});		
						}else if(up.type == 2){
							if(data.type == 1){
								arr.push({
									type:this.datas[a].type,
									content:this.datas[a].content,
									style:'padding-top:15px;'
								});	
							}else{
								arr.push({
									type:this.datas[a].type,
									content:this.datas[a].content,
									style:''
								});	
							}
						}else{
							arr.push({
								type:this.datas[a].type,
								content:this.datas[a].content,
								style:''
							});	
						}
					}else{
						arr.push({
							type:this.datas[a].type,
							content:this.datas[a].content,
							style:''
						});	
					}
				}
				return arr;
			}
		},
		props:{
			datas:{
				type:Array,
				default:() => ([]),
			}
		},
		data(){
			return {

			}
		}
	}
</script>

<style>
	.title-bd {
		height: 22px;
		width: 4px;
		background: rgba(255, 109, 0, 1);
	}
</style>